<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style type="text/css">
        .xing:before {
            content: '*  ';
            color: red;
        }
        .he{
            width: 200px;
            text-align: right;
        }
        .form-group{
            margin-left: 0;
        }
        .dan{
            text-align: center;
        }
        .di{
            margin-left: -50px;
        }
        .bie{
            margin-left: -18px;
        }
        .jie{
            /*margin-left: -0px;*/
        }
        .ming{
            margin-left: 30px;
        }
        #ka{
            margin-left: 100px ;
        }
        #bei{
            margin-left: 166px;
        }
        .zi{
            font-weight: bold;
            font-size: 30px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
<form id="total-form" class="dan">
    <div class="page-header zi" >
        <h7>商户基本信息</h7>
    </div>
    <div class="form-group">
        <div class="checkbox-inline">
            <div class="form-group">
                <div class="checkbox-inline he">
                    <label for="workOrderNum-ipt">&nbsp;&nbsp;工单编号：</label>
                </div>
                <div class="checkbox-inline">
                    <input type="text" class="form-control" id="workOrderNum-ipt" name="workOrderNum" readonly/>
                </div>

            </div>
        </div>
        <label class="checkbox-inline ">
            <div class="form-group">
                <div class="checkbox-inline he">
                    <label for="merchantName" class="xing">商户名称:</label>
                </div>
                <div class="checkbox-inline">
                    <input type="text" class="form-control" name="merchantName" id="merchantName"
                           placeholder="请输入商户名称" required/>
                </div>
            </div>
        </label>
    </div>
    <div class="form-group">
        <label class="checkbox-inline">
            <div class="checkbox-inline he">
                <label for="legalPersonName" class="xing">法人姓名:</label>
            </div>
            <div class="checkbox-inline">
                <input type="text" class="form-control" name="legalPersonName" id="legalPersonName"
                       placeholder="请输入法人姓名" required/>
            </div>
        </label>

        <label class="checkbox-inline">
            <div class="form-group">
                <div class="checkbox-inline he">
                    <label for="legalPersonId" class="xing">法人身份证:</label>
                </div>
                <div class="checkbox-inline">
                    <input type="text" class="form-control" name="legalPersonId" id="legalPersonId"
                           placeholder="请输入法人身份证" required/>
                </div>
            </div>
        </label>
    </div>
    <div class="form-group">
        <label class="checkbox-inline">
            <label class="xing he di"> 装机地址：</label>
        </label>
        <label class="checkbox-inline">
            <select name="installedAddressP" required id="installedAddressP">
                <optgroup label="请选择省...">
                    <option value="1">北京</option>
                    <option value="2">河北</option>
                    <option value="3">山东</option>
                </optgroup>
            </select>
        </label>
        <label class="checkbox-inline">
            <label for="installedAddressP">省</label>
        </label>
        <label class="checkbox-inline">
            <select name="installedAddressC" required id="installedAddressC">
                <optgroup label="请选择市..." id="installC">

                </optgroup>
            </select>
        </label>
        <label class="checkbox-inline">
            <label for="installedAddressC">市</label>
        </label>
        <label class="checkbox-inline">
            <select name="installedAddressA" required id="installedAddressA">
                <optgroup label="请选择区..." id="installA">

                </optgroup>
            </select>
        </label>
        <label class="checkbox-inline">
            <label for="installedAddressA">区</label>
        </label>
        <label class="checkbox-inline">
            <input type="text" class="form-control" id="installedAddressDetail" name="installedAddressDetail"
                   placeholder="详细地址..." required/>
        </label>
    </div>
    <div class="page-header zi">
        <h7>商户结算信息</h7>
    </div>
    <div class="form-group">
        <div class="checkbox-inline">
            <div class="form-group">
                <div class="checkbox-inline he">
                    <label for="settlementName" class="xing">结算人姓名：</label>
                </div>
                <div class="checkbox-inline">
                    <input type="text" class="form-control" name="settlementName" id="settlementName"
                           placeholder="请输入结算人姓名" required/>
                </div>

            </div>
        </div>

        <label class="checkbox-inline">
            <div class="form-group">
                <div class="checkbox-inline he">
                    <label for="settlementId" class="xing">结算人身份证:</label>
                </div>
                <div class="checkbox-inline">
                    <input type="text" class="form-control" name="settlementId" id="settlementId"
                           placeholder="请输入结算人身份证" required/>
                </div>
            </div>
        </label>
    </div>
    <div class="form-group">
        <div class="checkbox-inline">
            <label class="checkbox-inline">
                <div class="form-group">
                    <div class="checkbox-inline he bie">
                        <label for="settlementBankNum" class="xing">行别：</label>
                    </div>
                    <select name="settlementBankNum" required id="settlementBankNum" class="ming">
                        <optgroup label="请选择行别...">
                            <option value="01">中国工商银行</option>
                            <option value="02">中国农业银行</option>
                        </optgroup>
                    </select>
                </div>
            </label>
            <div class="checkbox-inline he" id="ka">
                <label for="cardNum" class="xing"> 卡号：</label>
            </div>
            <div class="checkbox-inline">
                <input type="text" class="form-control" name="cardNum" id="cardNum" placeholder="请输入卡号" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="checkbox-inline">
                <label for="settlementType" class="xing he jie">结算类型：</label>
            </label>
            <label class="checkbox-inline">
                <select name="settlementType" required id="settlementType">
                    <optgroup label="请选择结算类型...">
                        <option value="D0">D0</option>
                    </optgroup>
                </select>
            </label>
            <label class="checkbox-inline he" id="bei">
                <label for="note"> 备注：</label>
            </label>
            <label class="checkbox-inline">
                <input type="text" class="form-control" id="note" name="note"/>
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="checkbox-inline">
            <div class="form-group">
                <div class="checkbox-inline">
                    <button type="button" class="btn btn-success" id="submit-button">提交</button>
                    <button type="button" class="btn btn-info" id="select-button">查询信息</button>
                </div>
            </div>
        </div>
    </div>

</form>
<script src="jquery360/jquery3.6.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="application/javascript">
    $(() => {
        let workOrderNum = $("#workOrderNum-ipt");
        $.ajax({
            "url": "/user/work-order-num",
            "type": "post",
            "dataType": "json",
            "success": resp => {
                workOrderNum.val(resp["data"]);
            }
        });

        $("#installedAddressP").blur(() => {
            $.ajax({
                "url": "/user/select-father-area-num",
                "type": "post",
                "dataType": "json",
                "data": "fatherAreaNum=" + $("#installedAddressP").val(),
                "async": false,
                "success": resp => {
                    let ul = $("#installC");
                    let ul1 = $("#installA");
                    ul.children().remove();
                    ul1.children().remove();
                    $.each(resp, (i, v) => {
                        $(`<option value="${v["areaNum"]}">${v["areaName"]}</option>`).appendTo(ul);
                    });
                }
            });
        });

        $("#installedAddressC").blur(() => {
            $.ajax({
                "url": "/user/select-father-area-num-a",
                "type": "post",
                "dataType": "json",
                "data": "fatherAreaNum=" + $("#installedAddressC").val(),
                "async": false,
                "success": resp => {
                    let ul = $("#installA");
                    ul.children().remove();
                    $.each(resp, (i, v) => {
                        $(`<option value="${v["areaNum"]}">${v["areaName"]}</option>`).appendTo(ul);
                    });
                }
            });
        });

        $("#submit-button").click(() => {
            $.ajax({
                "url": "/user/insert-one",
                "type": "post",
                "data": $("#total-form").serialize(),
                "async": false,
                "success": resp => {
                    alert(resp)
                }
            });


        });

        $("#select-button").click(() => {
            location.href = "/select_all.html"
        })
    });
</script>
</body>
</html>